<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props修改</title>
    <script src="../../vue2.js"></script>
</head>
<body>
    <div id="box">
        {{ title }}
        <child :mytitle="title"></child>
    </div>
    <script>
        // 子组件属性 -- 父组件传给你的属性，只有父组件可以重新传，不允许子组件随意修改。
        // 状态 -- 组件内部的状态可以随意修改

        Vue.component("child",{
            data(){
                return{
                    mydata:"444444444"
                }
            },
            props:["mytitle"],   //父组件传过来的属性
            template:`<div>
                child-{{ mytitle }}-{{ mydata }}
                <button @click="handleClick">点击修改子组件属性</button>
            </div>`,

            methods:{
                handleClick(){
                    // this.mytitle = "22222222"   // 不允许修改props接受的父组件传过来的属性
                    this.mydata = '55555555555'    // 允许修改组件中data里面的状态
                }
            }
        })



        let vm = new  Vue({
            el:"#box",
            data:{
                title:"1111111111"
            }
        })
    </script>
</body>

</html>